import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
// 首屏加载页面
// const Plain = React.lazy(() => import('../softcover/plain'));

// 登录注册页面
const Login = React.lazy(() => import('../pages/Login'));//登录页面
const Layout = React.lazy(() => import('../pages/Layout'));//注册页面

// 管理员权限的页面
const Cates = React.lazy(() => import('../components/Cates'));//分类页面
const CatesList = React.lazy(() => import('../components/CatesList'));//分类列表页面

// 老板权限的页面
const Boss = React.lazy(() => import('../components/Boss'));//老板页面
const BossList = React.lazy(() => import('../components/BossList'));//老板列表页面

// 无权限访问此页面
const Merchandise = React.lazy(() => import('../components/Merchandise'));

// 普通用户权限的页面
const Purchase = React.lazy(() => import('../components/Purchase'));//购买页面
const Article = React.lazy(() => import('../components/Article'));//地图物流页面
// 首页底部tab栏
const TabList = React.lazy(() => import('../components/TabList'));//标签列表页面
const Home = React.lazy(() => import('../components/Home'));//首页
const My = React.lazy(() => import('../components/My'));//我的页面
const Fenlei = React.lazy(() => import('../components/FenLei'));//分类页面
const Gouwuche = React.lazy(() => import('../components/GouWuChe'));//购物车页面


// 导入高阶组件
import WithAuthGuard from '../HigherOrderComponents/withAuthGuard';

// 用高阶组件包裹需要守卫的页面
// const GuardedHome = withAuthGuard(Home);

const routes = createBrowserRouter([
    // {
    //     path: '*',
    //     element: <Plain />
    // },//首页屏幕图片
    {
        path: '/',
        element: <Login />
    },//登录
    {
        path: '/layout',
        element: <Layout />
    },//注册
    {
        element: <WithAuthGuard allow={['aaa']} />,
        children: [
            {
                path: '/boss',
                element: <Boss />
            },
            {
                path: '/bosslist',
                element: <BossList />
            }
        ]
    },//CEO页面
    {
        element: <WithAuthGuard allow={['admin']} />,
        children: [
            {
                path: '/cates',
                element: <Cates />
            },
            {
                path: '/cateslist',
                element: <CatesList />
            }
        ]
    },//管理员页面
    {
        element: <WithAuthGuard allow={['user', 'admin', 'aaa']} />,
        children: [
            {
                path: '/Purchase',
                element: <Purchase />
            },
            {
                path: '/Article',
                element: <Article/>
            }
        ]
    },//我的页面
    // 以上是管理页面，以下为普通用户页面，不需要守卫，
    // 只需浏览即可，不能操作，否则就必须登录注册。
    {
        path: '/tablist',
        element: <TabList />,
        children: [
            {
                path: 'home',
                element: <Home />
            },
            {
                path: 'fenlei',
                element: <Fenlei />
            },
            {
                path:'gouwuche',
                element: <Gouwuche />
            },
            {
                path: 'my',
                element: <My />
            }
        ]
    },
    {
        path: '/guard', element: <Merchandise />
    }
])

export default routes;